<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/css/navigationMember.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/css/pay.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script language="JavaScript">
        function pay1(){
            document.getElementById('pay').style.display="";
            document.getElementById('payInput').style.display="";
        }

        function pay2(){
            var money = $("#money").val();
            if(money != ""){
                $("#num").html(money);
                document.getElementById('payInput').style.display="none";
                document.getElementById('pay').style.display="";
                document.getElementById('payIMG').style.display="";
            } else {
                alert("请输入充值金额！")
            }

        }

        function pay3(){
            var money = $("#money").val();
            var XHR = new XMLHttpRequest();
            var FD  = new FormData();
            FD.append("money",money);
            XHR.open('POST', "${pageContext.request.contextPath}/purchase/prepaidBalance");
            XHR.send(FD);
        }

        function hid(){
            document.getElementById('pay').style.display="none";
            document.getElementById('payInput').style.display="none";
            document.getElementById('payIMG').style.display="none";
        }

        function clearNoNum(obj) {
            obj.value = obj.value.replace(/[^\d.]/g, "");    //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^0/g, "");       //验证第一个字符不是0
            obj.value = obj.value.replace(/^\./g, "");      //验证第一个字符是数字而不是.
            obj.value = obj.value.replace(/\.{2,}/g, ".");  //只保留第一个'.'清除多余的'.'
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");   //保证'.'只出现一次'.'而不能出现两次以上
        }
    </script>
    <style type="text/css">
        .container{
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 3%;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
    <style>
        body{
            background-image: url("${pageContext.request.contextPath}/statics/images/bg.png");
        }
    </style>
</head>
<body>

    <%
    Object object = session.getAttribute("usercurrent");
    if (object != null){
        String name = (String) object;
%>
<div class="top" align="right" style="background-color:rgba(255,255,255,0.5)">
    <div id="container1">
        <div class="search bar1">
            <form action="${pageContext.request.contextPath}/book/findBookByBookNameOrAuthor" method="post">
                <input type="text" name="str" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    </div>
    <ul>
        <li>
            <div style="border-radius: 50%">
                <b href="#"><img src="${pageContext.request.contextPath}/user/readPhoto?username=${usercurrent}" style="height: 40px;height: 40px"></b>
            </div>
            <ul>
                <li><a href="${pageContext.request.contextPath}/user/index">个人中心</a></li>
                <li><a href="${pageContext.request.contextPath}/account/toUpdatePassword">修改密码</a></li>
                <li><a onclick="pay1()">余额充值</a></li>
                <li><a href="${pageContext.request.contextPath}/out">退出</a></li>
            </ul>
        </li>
        <c><%=session.getAttribute("indexname")%></c>
    </ul>
</div>

    <%
    }else {
%>
<div class="top" align="right" style="background-color:rgba(255,255,255,0.5)">
    <div id="container2">
        <div class="search bar1">
            <form action="${pageContext.request.contextPath}/book/findBookByBookNameOrAuthor" method="post">
                <input type="text" name="str" placeholder="请输入您要搜索的书籍...">
                <button type="submit"></button>
            </form>
        </div>
    </div>
    <ul>
        <li>
            <div style="border-radius: 50%">
                <a href="${pageContext.request.contextPath}/account/toLogin" style="position: absolute;padding: 20px 16px;">登录/注册</a>
            </div>
        </li>
    </ul>
</div>
    <%
    }
%>

<div>
    <img src="${pageContext.request.contextPath}/statics/images/biaozhi.png" alt="" style="width: 277px;height: 181px;margin:5% 43% 0 43%;">
</div>

<div>
    <p style="text-align: center;font-size: 30px;font-family:Constantia;margin-top: 10px;">Cloud Bookstore</p>
    <p style="margin-top: 20px;text-align: center;font-size: 18px;color: #767474;">你的掌上“图书馆”</p>
</div>

<div style="width: 90%;height: 2%;margin: 20px auto;border-bottom: solid 1px #C6C3C3;"></div>

<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul style="margin-left: 5%">
                <c:forEach var="book" items="${requestScope.get('bookList')}">
                    <li style="list-style: none;float: left;">
                        <a href="${pageContext.request.contextPath}/book/findBookByISBN?bookISBN=${book.getBookISBN()}" class="tupian">
                            <img src="${pageContext.request.contextPath}/book/readPhoto?bookISBN=${book.getBookISBN()}" width="200px" height="200px"style="margin-right: 50px;">
                            <br>
                            <span style="margin-right: 50px;font-size: 20px">${book.getBookName()}</span>
                            <br><br>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div align="center" style="margin-bottom: 50px;">
        <label>第${requestScope.page.getPageCurrent()}/${page.pageCount}页</label>
        <a href="${pageContext.request.contextPath}/book/findAllBooks?pageNo=1" style="margin-left: 10px;">首页</a>
        <a href="${pageContext.request.contextPath}/book/findAllBooks?pageNo=${page.pageCurrent-1}" style="margin-left: 10px;">上一页</a>
        <a href="${pageContext.request.contextPath}/book/findAllBooks?pageNo=${page.pageCurrent+1}" style="margin-left: 10px;">下一页</a>
        <a href="${pageContext.request.contextPath}/book/findAllBooks?pageNo=${page.pageCount}" style="margin-left: 10px;margin-right: 10px;">尾页</a> 跳转到:
        <input type="text" style="width:30px" id="turnPage" />页
        <input type="button" onclick="startTurn()" style="height: 30px;width: 50px;padding-left: 5px;background-color: white;border-radius: 5px;margin-left: 10px;" value="跳转" />
        <script type="text/javascript">
            function startTurn(){
                var turnPage = document.getElementById("turnPage").value;
                if(turnPage > ${page.pageCount}){
                    alert("超过最大页数，请重新输入！");
                    return false;
                }
                var shref="${pageContext.request.contextPath}/book/findAllBooks?pageNo="+turnPage;
                window.location.href=shref;
            }
        </script>
    </div>

    <!--支付界面弹窗显示-->
    <div class="pay" id='pay'>
        <div align="center" class="popup">
            <div id="header" class="ui-icon-circle-check">
                <br><br><br><br><br><br>
                <div>
                    <form id="payInput">
                        <div>
                            <h4>当前余额为: <%=session.getAttribute("balance")%></h4>
                        </div>
                        <tr>
                            <td align="right">请输入充值金额：</td>
                            <br><br>
                            <td>
                                <input type="text" name="money" id="money" style="height: 30px;width: 150px" onkeyup="clearNoNum(money)">
                            </td>
                        </tr>
                        <br><br><br><br>
                        <button type="button" onclick="pay2()" style="width: 70px;height: 30px;position: absolute;left:120px;top:130px">确认充值</button>
                    </form>
                </div>
                <form id="payIMG" style="position: absolute; top: 7px; left:41px;">
                    <br><h3>请支付 <span id="num"></span> 元</h3>
                    <a href="${pageContext.request.contextPath}/purchase/paySuccessfully" onclick="pay3()"><img src="${pageContext.request.contextPath}/purchase/readPayPhoto" style="width: 300px;height: 300px;"></a>
                </form>
                <div id="header-right" onclick="hid()" style="cursor: pointer">x</div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('pay').style.display="none";
        document.getElementById('payInput').style.display="none";
        document.getElementById('payIMG').style.display="none";
    </script>
</div>
